<!--
*@Author: zt
*@Description: 会议申请
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <a-layout-content style="padding: 0 12px; background-color: #fff">
      <a-layout class="f-h-100 s-bg-white">
        <u-search-header style="padding-left: 0; padding-right: 0">
          <u-form
            :model="searchF.model"
            :gutter="16"
            :elements="searchEl"
            class="f-w-auto"
            :isSearch="true"
            @formChange="getSearch(1)">
            <a-col>
              <u-icon-button
                @click="getSearch(1)"
                style="margin-right: 10px">
                查询
              </u-icon-button>
              <u-icon-button
                itype="record"
                @click="showFlow = true">
                流程记录
              </u-icon-button>
            </a-col>
            <a-col flex="1">
              <a-row justify="end">
                <a-space>
                  <u-icon-button
                    itype="add"
                    @click="toEdit(1)"
                    v-if="route.params.pType == '1'">
                    新增
                  </u-icon-button>
                  <u-icon-button
                    itype="edit"
                    @click="toEdit(2)"
                    v-if="route.params.pType == '1'">
                    修改
                  </u-icon-button>

                  <u-icon-button
                    itype="report"
                    @click="auditAbout('1')"
                    v-if="route.params.pType == '1'">
                    上报
                  </u-icon-button>
                  <u-icon-button
                    itype="audit"
                    @click="auditAbout('2')"
                    v-if="route.params.pType == '2' && showAuditBnt">
                    审核
                  </u-icon-button>
                  <u-icon-button
                    itype="recall"
                    v-if="showRecall"
                    @click="auditAbout('4')">
                    取回
                  </u-icon-button>
                  <u-icon-button
                    itype="close"
                    @click="auditAbout('3')"
                    v-if="route.params.pType == '2' && showAuditBnt">
                    退回
                  </u-icon-button>
                  <u-icon-button
                    v-if="route.params.pType == '1'"
                    itype="delete"
                    @click="deleteBtn">
                    删除
                  </u-icon-button>
                </a-space>
              </a-row>
            </a-col>
          </u-form>
        </u-search-header>
        <a-layout-content>
          <u-table
            :columns="columns"
            :data="tabData"
            v-model:pagination="pagenation"
            :scroll="{ y: 'calc(100vh - 230px)' }"
            @onDblclick="onDblclick"
            @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"></u-table>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle"
    :keyid="keyid"
    :isAudited="showAuditBnt"
    @success="(showEdit = false), getSearch(1)" />

  <!-- 流程记录 -->
  <u-act-flowd
    v-model:open="showFlow"
    :selDatas="tabSelData"
    busiType="meet_apply" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { FormItemProps, Space, Image, TableColumnProps } from "ant-design-vue";
import { cloneDeep } from "lodash";
import { alertC, messageC } from "@/util/common";
import { formatImgUrl } from "@/util/format";
import { statusA } from "@/common/model/base";
import { useAuditAbout, IAuditParams } from "@/hooks/useAudit";
import { usePageTypeShow, useSearchShow } from "@/hooks/useAuditEl";
import { storeToRefs } from "pinia";
import { useBaseStore } from "@/store";
import dayjs from "dayjs";
import Edit from "./Edit.vue";
import * as meetApplicantApi from "@/service/administration/meet/applicant/index";

const { APP_STATUS, ADV_REPORT_MET } = storeToRefs(useBaseStore());
const route = useRoute();
let keyid = ref("");
let tabSelData = ref([]);
let AppStatus = ref([]);

// 编辑
let dialogTitle = ref<string>("");
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
const showFlow = ref(false);
const searchF = reactive({
  model: {
    keywords: "",
    status: 1,
    pageStatus: 1,
  },
});

// 曾经办，不显示审核和退回按钮
const showAuditBnt = ref<boolean>(
  useSearchShow(searchF.model, "3", {
    key: "status",
    result: false,
    noResult: true,
  })
);

// 取回按钮
const showRecall = computed(() => {
  let pType = route.params.pType;
  if(pType == 2) {
    return searchF.model.status == 3
  }
  return true
})

const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: "会议名称",
    key: "keywords",
    element: "input",
    col: { span: 4 },
    formItemProps: formItemProps,
  },
  {
    label: "会议类型",
    key: "meettype",
    element: "select",
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      placeholder: "会议类型",
      options: computed(() => ADV_REPORT_MET.value),
    },
  },
  {
    label: "审核状态",
    key: "status",
    element: "select",
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      placeholder: "审核状态",
      options: computed(() => AppStatus.value),
      allowClear: route.params.pType == 2 ? false : true,
    },
  },
];

// 列表
let tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: "index",
    title: "序号",
    width: 60,
    align: "center",
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: "meetname", title: "会议名称", align: "center", width: 150 },
  {
    dataIndex: "meettype",
    title: "会议类型",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      let texts;
      ADV_REPORT_MET.value.forEach((item) => {
        if (item.id == text) {
          texts = item.name;
        }
      });
      return texts;
    },
  },
  {
    dataIndex: "filepath",
    title: "会议室图片",
    width: 100,
    align: "center",
    customRender: ({ text }) => {
      return h(Image, { src: formatImgUrl(text), style: { width: "40px", height: "40px" } });
    },
  },
  { dataIndex: "fkconfer", title: "会议室名称", align: "center", width: 150 },
  {
    dataIndex: "conferaddress",
    title: "会议地点",
    align: "center",
    width: 150,
  },
  {
    dataIndex: "starttime",
    title: "开始时间",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      return dayjs(text).format("YYYY-MM-DD HH:mm");
    },
  },
  {
    dataIndex: "endtime",
    title: "结束时间",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      return dayjs(text).format("YYYY-MM-DD HH:mm");
    },
  },
  {
    dataIndex: "status",
    title: "会议状态",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      let texts = {
        "1": "未提交",
        "2": "审核中",
        "3": "审核完成",
        "4": "已退回",
      };
      return texts[text];
    },
  },
  { dataIndex: "taskname", title: "流程环节", align: "center", width: 150 },
  {
    dataIndex: "reauditusername",
    title: "当前审核人",
    width: 150,
    align: "center",
  },
]);

onMounted(async () => {
  if (route.params.pType == "1") {
    AppStatus.value = APP_STATUS.value;
    searchF.model.status = 1;
    searchF.model.pageStatus = 1;
    searchF.model.meettype = "";
  } else if (route.params.pType == "2") {
    AppStatus.value = APP_STATUS.value;
    searchF.model.status = "2";
    searchF.model.pageStatus = 2;
    searchF.model.meettype = "";
    AppStatus.value = statusA(2);
  }

  await getSearch(1);
});

// 列表查询
const getSearch = async (current) => {
  if (current == 1) {
    pagenation.current = current;
  }
  let tForm = cloneDeep(searchF);
  tForm.current = pagenation.current;
  tForm.size = pagenation.pageSize;
  const res = await meetApplicantApi.page(tForm);
  if (res.code == 0) {
    tabData.value = res.data.records;
    pagenation.total = res.data.total;
  }
};

// 上报、审核、退回
const auditAbout = async (type: string | number) => {
  const auditParams: IAuditParams = {
    type: "meet_apply",
    selDatas: tabSelData.value,
  };
  try {
    const res = await useAuditAbout(type, auditParams);
    if (res) {
      pagenation.current = 1;
      getSearch(1);
    }
  } catch (error) {}
};

// 行双击
const onDblclick = (record) => {
  keyid.value = record["keyid"];
  dialogTitle.value = "会议编辑";
  showEdit.value = true;
};

// 新增或编辑
const toEdit = (type: number) => {
  keyid.value = "";
  if (type == 1) {
    dialogTitle.value = "会议申请";
  }
  if (type == 2) {
    if (tabSelData.value.length !== 1) {
      alertC("能且只能选择一条数据", "warning");
      return;
    }
    keyid.value = tabSelData.value[0].keyid;
    dialogTitle.value = "会议编辑";
  }

  showEdit.value = true;
};

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    messageC("请先选择要删除的数据!", "warning");
    return;
  }

  let noDel = tabSelData.value.some((i) => ["2", "3"].includes(i["status"] + ""));
  if (noDel) {
    messageC("审核中或审核完成的数据不能删除!");
    return;
  }

  let ids = tabSelData.value.map((item) => item.keyid);
  alertC("确认删除选中的数据?", "confirm").then(async () => {
    const res = await meetApplicantApi.del({ ids: ids.join(",") });

    if (res.code == 0) {
      getSearch(1);
      messageC(res.msg, "success");
    } else {
      alertC(res.msg, "warning");
    }
  });
};

let showEdit = ref<boolean>(false);

// 详情
let showDetial = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}

:deep(.u-meet-status-dot) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c);
}
</style>
